<template>
  <div id="login" style="text-align: center">

    <div style="caret-color:red;margin-top: 130px">
      <img src="../assets/logo.png" width="400px;height: 20px">
    </div>
    <div class="colorLump">
      <div class="font">
        <span>修改密码</span>
      </div>
      <div class="users">
        <el-input prefix-icon="el-icon-user-solid" v-model="usercode" placeholder="请输入账号"></el-input>
      </div>
      <div class="amends">
        <el-input v-model="oldPassword" placeholder="请输入旧密码" prefix-icon="el-icon-lock" show-password></el-input>
      </div>
      <div class="amends">
        <el-input v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
      </div>
      <div class="amends">
        <el-input v-model="confirmPassword" placeholder="请确认新密码" show-password v-on:focus="check()"></el-input>
      </div>
      <div style="margin-left: 255px;font-size:12px;color: #0f45ff" v-on:click="goToLogin">
        <span>返回登录</span>
      </div>
      <div>
        <el-button style="width:265px;margin-top: 10px" type="success" @click="confirmAmend">确认修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Amend",
  data() {
    return {
      usercode: '',
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  methods: {
    goToLogin() {
      this.$router.push("/login")
    },

    check: function () {
      if (this.newPassword.length < 8 || this.newPassword.length > 14) {
        this.$message.warning("新密码长度为8-14位")
        return
      }
      if (/[\u4e00-\u9fa5]/.test(this.newPassword) || /[\s]/.test(this.newPassword)) {
        this.$message.warning("新密码不包含空格和汉字")
        return
      }
      if (!/^(((?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\s0-9a-zA-Z])|(?=.*[a-zA-Z])(?=.*[^\s0-9a-zA-Z]))[^\s]+)$/.test(this.newPassword)) {
        this.$message.warning("新密码必须包含字母，数字以及标点符号至少包含两种")
        return
      }
    },
    confirmAmend() {
      if (!this.usercode) {
        this.$message.warning("请输入账号")
        return
      }
      if (!this.oldPassword) {
        this.$message.warning("请输入旧密码")
        return
      }
      if (!this.newPassword) {
        this.$message.warning("请输入新密码")
        return
      }
      if (this.newPassword.length < 8 || this.newPassword.length > 14) {
        this.$message.warning("新密码长度为8-14位")
        return
      }
      if (/[\u4e00-\u9fa5]/.test(this.newPassword) || /[\s]/.test(this.newPassword)) {
        this.$message.warning("新密码不包含空格和汉字")
        return
      }
      if (!/^(((?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\s0-9a-zA-Z])|(?=.*[a-zA-Z])(?=.*[^\s0-9a-zA-Z]))[^\s]+)$/.test(this.newPassword)) {
        this.$message.warning("新密码必须包含字母，数字以及标点符号至少包含两种")
        return
      }
      if (!this.confirmPassword) {
        this.$message.warning("确认密码不能为空")
        return
      }
      if (this.oldPassword === this.newPassword) {
        this.$message.warning("新密码不能和旧密码相同")
        return
      }
      if (this.confirmPassword != this.newPassword) {
        this.confirmPassword = "";
        this.$message.warning("和新密码不一致请重新确认密码")
        return
      }
      let param = new URLSearchParams();
      param.append("usercode", this.usercode)
      param.append("oldPassword", this.oldPassword)
      param.append("newPassword", this.newPassword)
      this.axios.post('/pmph/action/pmph/changePassWord', param)
        .then((res) => {
        })
    }
  }

}
</script>

<style scoped>
#login {
  background: url("../assets/背景图.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

.amends {
  width: 260px;
  margin-top: 20px;
  margin-left: 50px;
}

.users {
  width: 260px;
  margin-top: 30px;
  margin-left: 50px;
}

.colorLump {
  background-color: #FFFF;
  opacity: 0.8;
  width: 360px;
  height: 400px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 40px;
}

.font {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 1.5px
}
</style>
